<template>
	<view>
		<view class="bw-loading">
			<view v-if="loading == false">
				<text class="iconfont icon-jiazai rotate" :style="{'font-size':25 + 'px'}"></text>
				<text>正在加载中</text>
			</view>
			<view v-else-if="loading == true">
				<text>加载完成</text>
			</view>
			<view v-else>
				<text>下拉加载</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bw-loading',
		props: {
			loading: { //数据是否加载完成
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../iconfont.scss";

	.bw-loading {
		width: 100%;
		margin: 40rpx auto;
		text-align: center;

		text {
			font-size: 20rpx;
			display: block;
			padding-top:10rpx;
		}

		.rotate {
			-webkit-animation: animal 1s infinite linear;
			-webkit-transform-origin: center center;
			-ms-transform-origin: center center;
			transform-origin: center center;
		}

		@-webkit-keyframes animal {
			0% {
				transform: rotate(350deg);
				-ms-transform: rotate(350deg);
				-webkit-transform: rotate(350deg);
			}

			100% {
				transform: rotate(10deg);
				-ms-transform: rotate(10deg);
				-webkit-transform: rotate(10deg);
			}
		}
	}
</style>
